<template>
  <div>
    <my-menu></my-menu>
    <div class="container clearfix">
      <div class="left-container">
        <div class="banner" v-loading="loading">
          <el-carousel trigger="click" height="312px">
            <el-carousel-item v-for="item in imageList" :key="item.id">
              <img :src="item.img" alt="" @click="$router.push({name: 'courseDetail',params: {name: item.id}})">
            </el-carousel-item>
          </el-carousel>
        </div>
        <read-header :form="form" @changePage="changePage" :pageTotal="page.pageTotal" :page="page.page"></read-header>
      </div>
      <div class="right-container">
        <my-type></my-type>
      </div>
    </div>
    <div class="footer">
      <p>备案号: <a href="http://www.beian.miit.gov.cn">浙ICP备17003801号-1</a></p>
    </div>
  </div>
</template>

<script>
import myMenu from '../components/menu'
import myType from '../components/type'
import readHeader from '../components/readList'
import axios from 'axios'
export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://api.yeshaojun.com/api/article/list`, {
      params: {
        page: 1,
        pageSize: 10
      }
    })
    console.log('data', data)
    return {
      form: data.data,
      page: {
        page: data.page,
        pageSize: data.pageSize,
        pageTotal: data.pageTotal
      }
    }
  },
  data () {
    return {
      imageList: [],
      form: [],
      page: {
        page: 1,
        pageSize: 10,
        pageTotal: 1
      },
      loading: false
    }
  },
  components: {
    myMenu,
    myType,
    readHeader
  },
  methods: {
    getNews () {
      this.$store.dispatch('getNews', {
        data: {
          page: this.page.page,
          pageSize: this.page.pageSize
        },
        cb: (res) => {
          if (res.data.code === 20000) {
            this.form = res.data.data
            this.page.pageTotal = parseInt(res.data.pageTotal)
            this.page.page = parseInt(res.data.page)
          }
        }
      })
    },
    getProject () {
      this.loading = true
      this.$store.dispatch('getProject', {
        data: '',
        cb: (res) => {
          if (res.data.code === 20000) {
            for (let i = 0; i < res.data.data.length; i++) {
              // console.log('22222222')
              if (i <= 2) {
                this.imageList.push(res.data.data[i])
              }
            }
            // console.log('1111', this.imageList)
          }
          this.loading = false
        }
      })
    },
    changePage (p) {
      this.page.page = p
      this.getNews()
    }
  },
  mounted () {
    this.getProject()
  }
}
</script>

<style lang="stylus" scoped>
  .container
    width:1200px
    margin: 0 auto
    padding-top:20px
    .left-container
      height: auto
      width: 100%
      max-width: 800px
      display: inline-block
      float: left
      .banner
        height:312px
        img
          width:100%
          height: 312px
    .right-container
      float: left
      width: 380px
      z-index: -1
      height: 100%
      padding-bottom: 100px
      padding-left: 20px
      overflow: hidden
  .footer
    width 100%
    height 30px
    background-color #f0f0f0
    p
      color #999
      text-align center
      a
        color #999
</style>

